<template>
  <div class="velocity-chart-container">
    <div ref="velocityChartRef" class="chart"></div>
    <div class="speed-cards">
      <el-card class="speed-card">
        <div class="card-title">最大速度</div>
        <div class="card-value">{{ maxSpeed.toFixed(1) }}<span class="unit">km/h</span></div>
        <div class="card-time">时间: {{ formatTime(maxSpeedTime) }}</div>
      </el-card>

      <el-card class="speed-card">
        <div class="card-title">最小速度</div>
        <div class="card-value">{{ minSpeed.toFixed(1) }}<span class="unit">km/h</span></div>
        <div class="card-time">时间: {{ formatTime(minSpeedTime) }}</div>
      </el-card>

      <el-card class="speed-card">
        <div class="card-title">平均速度</div>
        <div class="card-value">{{ avgSpeed.toFixed(1) }}<span class="unit">km/h</span></div>
        <div class="card-time">全程</div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, watch, computed, nextTick} from 'vue'
import * as echarts from 'echarts'
defineExpose({
  changeTab
})
function changeTab() {
  nextTick(()=>{
    chartInstance.resize()
  })
}

const props = defineProps(['data'])
const velocityChartRef = ref(null)
let chartInstance = null

// 计算速度统计数据
const maxSpeed = computed(() => {
  if (!props.data.length) return 0
  return Math.max(...props.data.map(d => d.velocity.vel))
})

const minSpeed = computed(() => {
  if (!props.data.length) return 0
  return Math.min(...props.data.map(d => d.velocity.vel))
})

const avgSpeed = computed(() => {
  if (!props.data.length) return 0
  const sum = props.data.reduce((acc, d) => acc + d.velocity.vel, 0)
  return sum / props.data.length
})

const maxSpeedTime = computed(() => {
  if (!props.data.length) return 0
  const maxItem = props.data.reduce((max, d) => d.velocity.vel > max.velocity.vel ? d : max, props.data[0])
  return maxItem.time
})

const minSpeedTime = computed(() => {
  if (!props.data.length) return 0
  const minItem = props.data.reduce((min, d) => d.velocity.vel < min.velocity.vel ? d : min, props.data[0])
  return minItem.time
})

// 格式化时间
const formatTime = (seconds) => {
  const min = Math.floor(seconds / 60)
  const sec = (seconds % 60).toFixed(3)
  return `${min}:${sec.padStart(6, '0')}`
}


// 初始化图表
onMounted(() => {
  chartInstance = echarts.init(velocityChartRef.value)
  window.addEventListener('resize', () => chartInstance.resize())
})

// 更新图表
watch(() => props.data, (newData) => {
  if (!chartInstance || !newData.length) return

  const timestamps = newData.map(d => d.time.toFixed(3))
  const velocities = newData.map(d => d.velocity.vel)
  const vx = newData.map(d => d.velocity.vx)
  const vy = newData.map(d => d.velocity.vy)
  const vz = newData.map(d => d.velocity.vz)

  const option = {
    title: {
      text: '速度分析',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const point = newData[params[0].dataIndex]
        return `
          时间: ${point.time.toFixed(3)}s<br>
          总速度: ${point.velocity.vel.toFixed(1)}km/h<br>
          vx(东): ${point.velocity.vx.toFixed(1)}<br>
          vy(北): ${point.velocity.vy.toFixed(1)}<br>
          vz(天): ${point.velocity.vz.toFixed(1)}
        `
      }
    },
    legend: {
      data: ['总速度', 'vx(东)', 'vy(北)', 'vz(天)'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timestamps,
      name: '时间 (s)',
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '速度 (km/h)'
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        start: 0,
        end: 100,
        bottom: -5
      }
    ],
    series: [
      {
        name: '总速度',
        type: 'line',
        data: velocities,
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#5470c6'
        },
        symbol: 'circle',
        symbolSize: 6
      },
      {
        name: 'vx(东)',
        type: 'line',
        data: vx,
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#91cc75'
        },
        symbol: 'emptyCircle',
        symbolSize: 4
      },
      {
        name: 'vy(北)',
        type: 'line',
        data: vy,
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#fac858'
        },
        symbol: 'emptyCircle',
        symbolSize: 4
      },
      {
        name: 'vz(天)',
        type: 'line',
        data: vz,
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#ee6666'
        },
        symbol: 'emptyCircle',
        symbolSize: 4
      }
    ]
  }

  chartInstance.setOption(option)
}, { deep: true })
</script>

<style scoped>
.velocity-chart-container {
  height: 500px;
  display: flex;
  flex-direction: column;
}

.chart {
  flex: 1;
}

.speed-cards {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.speed-card {
  width: 30%;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.speed-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.1);
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.unit {
  font-size: 14px;
  margin-left: 4px;
  color: #999;
}

.card-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
</style>